<template>
	<view class="ban">
		<swiper vertical="true" interval="3000" loop="true" 
		circular autoplay="true" :duration="0" :indicator-dots="false"  @change="handleChange">
			<swiper-item v-for="(item,index) in banList" :key="index" :class="{'InOut': currentIndex === index}">
				<view class="flex">
					<image class="baan_img" :src="rq.imgUrl(item.avater)" mode="aspectFill"></image>
					<view class="flex_center">{{item.user_name}}：{{item.status_text}}</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
		    banList: {
		      type: Array, // 类型为数组
		      default: () => [], // 默认值为空数组
		    },
		},
		data() {
			return {
				currentIndex: 0, 
			}
		},
		onShow() {

		},
		onLoad() {
			
		},
		methods: {
			handleChange(e) {
			  this.currentIndex = e.detail.current; // 更新当前索引为变化后的索引值
			}
		},
	};
</script>

<style scoped>
	.ban{
		z-index: 9;
		width: 300rpx;
		height: 60rpx;
		overflow: hidden;
		border-radius: 28rpx;
		color: #FFF;
		/* background:  #FFF; */
		/* background:  rgba(0, 0, 0, 0.6); */
	}
	.baan_img{
		width: 60rpx; 
		height: 60rpx; 
		border-radius: 50%; 
		margin-right: 10rpx;
	}
	swiper-item {
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 28rpx;
		font-size: 26rpx;
		overflow: hidden;
		background:  rgba(0, 0, 0, 0.3);
		
		/* animation: fadeInOut 3s linear infinite; */
	}
	.InOut {
		animation: fadeInOut 3s forwards;
	}
	@keyframes fadeInOut {
		0% { opacity: 0; }
		40% { opacity: 1; }
		60% { opacity: 1; }
		80% { opacity: 0; }
		/* 100% { opacity: 0; } */
	}
</style>